<template>
    <div class="trace" @click="openRightIndex=-1">
        <div class="detail-info">
            <div class="c-item auto">
                <p class="title">单位名称</p>
                <p class="name auto">{{dataList.UnitName}}</p>
            </div>
            <div class="c-item">
                <p class="title">测温时间</p>
                <p class="name">{{dataList.OperateTime}}</p>
            </div>
        </div>
        <div class="sift">
            <h3 class="header">测温人员<span class="add-trace"  @click="showline">添加</span></h3>
           
            <div class="c-item" v-for="(item, index) in TemperaturePerson" :key="index">
                 
                <p class="title" style="overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;width:50%">{{item.TemperaturePersonName}}</p>
                <!-- <p class="title">部门:生产一车间</p> -->
                <v-touch v-on:swipeleft="onSwipeLeft(index)" tag="div" style="touch-action:pan-y !important;position: relative;">
                <div class="name">
                    <group>
                        <x-number :disabled="!isCanEdit" v-model="item.Temperature" :step="0.1" :fillable="true"  :max="41.1"></x-number>
                    </group>
                </div>
                <div style="height: 40px;width: 120px;position: absolute;top:0px;right: 0;cursor: pointer" v-if="openRightIndex==index">
                        <p style="width:60px;text-align:center;height: 40px;line-height: 40px;background-color: red;color: #fff;float: left" @click="del(item)">删除</p>
                        <p style="width:60px;text-align:center;height: 40px;line-height: 40px;background-color: #ccc;color: #fff;float: right" @click="openRightIndex=-1">取消</p>
                    </div>
                </v-touch>
            </div>
        </div>
        <div class="sift">
            
            <div  class="trace-detail">
                <div class="c-item">
                    <p class="title">测温人数</p>
                    <div class="name">
                       {{TemperaturePerson.length}}人
                    </div>
                </div>
                <div class="c-item">
                    <p class="title">记录人员</p>
                    <div class="name">
                        <input :readonly="!isCanEdit" type="text" v-model="dataList.RecordPersonName"  placeholder="请输入记录人员名称">
                    </div>
                </div>
                <div class="c-item">
                    <p class="title">备注</p>
                    <div class="name">
                        <input :readonly="!isCanEdit" type="text" v-model="dataList.Remark"  placeholder="请填写备注信息">
                    </div>
                </div>
            </div>
        </div>
        <div class="sift menu">
            <div class="fujian">
                <span class="left">附件</span>
                <span class="right">共上传{{uploadLength}}个附件</span>
            </div>
            <div class="upload-wrap">
                <upload   @setFormData="setFormData"></upload>
            </div>
            <div class="btns" v-if="isCanEdit">
                <!-- <div class="save" @click="toSubmit(0)">保存</div> -->
                <div class="submit" limitNumber="5" @click="toSubmit(1)">提交</div>
            </div>
        </div>
        <div v-transfer-dom>
           <group> 
            <popup v-model="lineValue"
                   width="100%"
                   @on-hide="propHide">
<!-- <div class="header">
    <x-icon type="ios-arrow-left" size="" class="icon-white" @click="$router.go(-1)"></x-icon>检查区域
</div> -->

 <!-- <x-header style="
    position: fixed;
    width: 100%;
    top: 42%;
" title="选择测温人员"></x-header> -->

<x-switch v-model="switchmodel" style="
    background-color: #2269FC;
" title="全选"  @change.native="switchM"></x-switch>
                <div class="searchDiv" >
                    <input type="text" @blur="blurmt" v-model="username" class="search" placeholder="输入用户名搜索">
                </div>
                <div class="position-horizontal-demo"
                     v-for="(item,index) in hdLevel"
                     :key="index"
                     @click="selectline(item,index)">
                     <!-- <x-switch title="全选"></x-switch> -->
                    <span >
                        {{item.DisplayName}}
                    </span>
                    <x-icon type="ios-checkmark-empty"
                            size="30"
                            v-if="checklist[index]"></x-icon>
                </div>
                
            </popup>
            </group>
        </div>
        <myMenu ></myMenu>
    </div>
</template>

<script>
import {TransferDom, Group, XNumber,Popup,XSwitch  } from 'vux'
import Upload from '@commonComponents/upload/index'
import formatDate from "@/utils/formatDate"
import myMenu from '@/commonComponents/menu'

export default {
    name: 'trace',
    data () {
        return {
            eltype:'',
            username:'',
            switchmodel:false,
            openRightIndex:-1,
            employeeType:'',
            isCanEdit: true, // 是否可以编辑
            userInfo: {},
            temperature: 36.2, // 体温
            value3: [''],
            formData: new FormData(),
            images: [],
            yzlist:[],
            uploadLength: 0, // 图片上传个数
            listArr: [],
            total: 0,
            listCount: 0, // 当前列表条数
            hdLevel: [], // 
            checklist: [], // 人员列表
            lineValue: false, // 选择人员
            dataList: {
                unitid: '', // 项目名称
                UnitName:'',
                UnitCode:'',
                OperateTime: `${formatDate().split('-')[0]}-${formatDate().split('-')[1]}-${formatDate().split('-')[2]} ${formatDate().split('-')[3]}:${formatDate().split('-')[4]}`, // 获取当前时间  测温时间
                RecordPersonName:'',//被测温人员
                RecordPersonId:'',//被测试人员ID
                Remark:'', // 备注
                IsCommit: '', // 是否保存或提交 0 保存 1提交
                images: [],
                uploadImgs: [],
                newBlobList: []
            },
            TemperaturePerson:[
            ]
        }
    },
    components: {
        Group,
        XNumber,
        Upload,
        Popup,
        myMenu,
        XSwitch,
    },
    directives: {
        TransferDom
    },
    created () {
        this.$vux.loading.show({
            text: '加载中...'
        })
        // 获取用户信息，判断是否有操作权限
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.$axiosAjax.GetIsManager({
            userNo: this.userInfo.userId
        }).then(res => {
            if (res.status == 200) {
                if (res.data.code == 1) {
                    this.isCanEdit = true
                } else {
                    this.isCanEdit = false
                }
            }
        })
        
        
    },
    mounted () {
        this.userInfo = JSON.parse(localStorage.getItem('registerInfo')) || {}
        this.dataList.unitid = this.userInfo.departId
        this.dataList.UnitName = this.unescape(this.userInfo.departName)
        this.dataList.RecordPersonId = this.userInfo.userId
        var token = JSON.parse(window.localStorage.getItem('userInfo')) || {}
        this.dataList.RecordPersonName = token.nickName

        this.employeeType = this.$route.query.type
        if (this.employeeType == 'glry') {
            this.eltype = '管理人员'
        }
        if (this.employeeType == 'lwry') {
            this.eltype = '劳务人员'
        }
        this.onPullingDown(this.eltype)

    },
    watch:{
        'username'(val){
            // document.body.scrollTop = 0;
            this.switchmodel = false
             this.checklist =[]
            if (val){
                this.searchname(val)
            }else {
                this.searchname(val)
               
            }
        }
    },
    methods: {
        blurmt () {
            document.body.scrollTop = 0;
        },
        searchname (name) {
            // 查询人员
            let params = {
                'pageSize': 2000,
                'pageIndex':1,
                'deptid':this.userInfo.departId,
                'EmployeeType':this.eltype,
                'name':name
            }
            this.$axiosAjax.getalluserlist(params).then((res) => {
                if (res.status == 200) {
                    this.hdLevel = res.data.Data
                }
            }
        ).finally(() => {
                this.$vux.loading.hide()
            })
        },
        switchM () {
            if(this.switchmodel) {
                this.hdLevel.forEach((item,index)=>{
                    if(!this.checklist[index]) {
                        this.selectline(item,index)
                    }
                })
            } else {
                 this.checklist =[]
            }
        },
        //特殊字符转化
        unescape(html) {
            return html
                .replace(html ? /&(?!#?\w+;)/g : /&/g, '&amp;')
                .replace(/&lt;/g, '<')
                .replace(/&gt;/g, '>')
                .replace(/&quot;/g, '"')
                .replace(/%23/g, '#')
        },
        propHide () {
           this.username = ''
           this.switchmodel = false
           this.checklist = []
        },
        del(val) {
            for (var i = 0;i < this.TemperaturePerson.length; i++){
                if (this.TemperaturePerson[i].TemperaturePersonId==val.TemperaturePersonId){
                    this.TemperaturePerson.splice(i,1);
                    this.yzlist.splice(i,1);
                }
            }
                    // let that = this
            // let param = {
            //     'allowPaging': true,
            //     'business': 'DeleteHidInfo',
            //     'data': {
            //         "id": val
            //     }
            // }
            // if(this.isRegister==3){
            //     this.$vux.toast.text("已提交检查不能删除隐患数据")
            //     return;
            // }
            // this.$axiosAjax.getConfigJson(
            //     param
            // ).then(
            //     (res) => {
            //         if (res.data.Code == 'ok') {
            //             that.$vux.toast.text(`删除成功！`)
            //         }
                    
            //     }
            // ).catch(response => {

            // })
        },
        onSwipeLeft(index){
        this.openRightIndex=index
        },
        showline () {
            if(this.hdLevel.length==0) {
                this.$vux.toast.text('暂无人员,请先增加人员');
            } else {
                this.lineValue = true
                this.onPullingDown(this.eltype)
            }
        },
        selectline (items, index) {
            this.checklist[index] = !this.checklist[index]
            
            let typeNamelist = []
            let typeLists = []
            this.checklist.forEach(
                (item, index1) => {
                    if (item) {
                        var model = {}
                        model.UnitId=this.hdLevel[index1].DepartmentId,
                        model.UnitName=this.hdLevel[index1].DepartmentName,
                        model.UnitCode=this.hdLevel[index1].DepartmentName,
                        model.TemperaturePersonName=this.hdLevel[index1].DisplayName,
                        model.TemperaturePersonId=this.hdLevel[index1].EmployeeId,
                        model.Temperature='36.8'
                        typeNamelist.push(model)
                    }
                }
            )
           typeNamelist.forEach((item) => {
                 //debugger
                 if(this.TemperaturePerson.length==0) {
                    this.TemperaturePerson.push(item)
                    this.yzlist.push(item.TemperaturePersonId)
                 } else {
                    if(this.yzlist.indexOf(item.TemperaturePersonId) == -1) {
                        this.TemperaturePerson.push(item)
                        this.yzlist.push(item.TemperaturePersonId)
                    }
                 }
           })
            this.$forceUpdate()
            this.$nextTick(() => {
                document.querySelectorAll('.vux-number-input').forEach((item)=>{
                    console.log(item)
                    if(item != null) {
                        item.setAttribute('pattern', '')
                    }          
                })
            })
        },
        setFormData (formData, uploadLength, images) {
            this.formData = formData
            this.uploadLength = uploadLength
            this.images = images
        },
        // setFormData (formData, uploadLength, uploadImgs, images, newBlobList) {
        //     debugger
        //     this.uploadLength = uploadLength
        //     this.uploadImgs = uploadImgs
        //     this.images = images
        //     this.newBlobList = newBlobList
        //     this.formData = newBlobList
        //     // this.$store.state.images = this.images
        //     // this.$store.state.uploadImgs = this.uploadImgs
        //     // this.$store.state.formData = Object.assign({}, this.uploadImgFormData)
        //     // this.dataList = Object.assign({}, this.dataList, {
        //     //     'images': this.images,
        //     //     'uploadImgs': this.$store.state.uploadImgs,
        //     //     'formData': formData,
        //     //     'newBlobList': newBlobList
        //     // })
        // },
        toSubmit(val) {
            // 信息校验
            if (this.TemperaturePerson.length==0) {
                this.$vux.toast.text('测温人员不能为空');
                return;
            }
            let trackAllIn = true
            this.TemperaturePerson.forEach(item => {
                    if (item.Temperature<'35.5') {
                        trackAllIn = false
                    }
            })
            if (!trackAllIn) {
                this.$vux.toast.text('体温数据不能小于35.5');
                return;
            }
            this.$vux.loading.show({
                text: '正在提交...'
            });
            let params = {
                'data': {
                    'unitid': this.dataList.unitid,
                    'UnitName': this.dataList.UnitName,
                    'UnitCode': this.dataList.UnitCode,
                    'RecordPersonName': this.dataList.RecordPersonName,
                    'RecordPersonId': this.dataList.RecordPersonId,
                    'OperateTime':this.dataList.OperateTime,
                    'Remark':this.dataList.Remark,
                    'IsCommit':val, // 0 保存 1提交
                    'TemperaturePerson':this.TemperaturePerson
                }
            }
            //let formData = Object.assign({}, this.dataList).formData
            this.$axiosAjax.SaveTwtz(
                params,
                this.formData
            ).then((res) => {
                if (res.data.code === 0) {
                    this.$vux.loading.hide();
                    this.$vux.toast.text('提交成功')
                    this.$router.go(-1)
                } else {
                    this.$vux.loading.hide();
                    this.$vux.toast.text('提交失败')
                }
            }).catch(() => {
                this.$vux.loading.hide();
                this.$vux.toast.text('提交失败')
            })
        },
        onPullingDown (vartype) {
            // 获取所有人员
            let params = {
                'pageSize': 2000,
                'pageIndex':1,
                'deptid':this.userInfo.departId,
                'EmployeeType':vartype
            }
            this.$axiosAjax.getalluserlist(params).then((res) => {
                if (res.status == 200) {
                   this.hdLevel = res.data.Data
                    // res.data.forEach(element => {
                    //     this.hdLevel.push(element.DisplayName)
                    // });
                    this.total = res.data.count
                }
            }
        ).finally(() => {
                this.$vux.loading.hide()
            })
        },
        onPullingUp () {
            this.pageIndex++
            // 模拟上拉 加载更多数据
            this.$axiosAjax.GetTwtzList(this.parmas).then((res) => {
            console.log(res, 159)
                if (res.status == 200) {
                    this.listArr = res.data.data
                    this.listCount = this.listArr.length
                    if (this.listCount < this.total) {
                        this.$refs.scroll0.forceUpdate(true)
                    } else {
                        this.$refs.scroll0.forceUpdate(false)
                    }
                }
            }
        )
        },
        // 获取年月日时分秒
        getMilliDate() {
            let milliDate =''
            let newDate = new Date()
            let hours = newDate.getHours() >= 10 ? newDate.getHours() : `0${newDate.getHours()}`
            let minutes = newDate.getMinutes() >= 10 ? newDate.getMinutes() : `0${newDate.getMinutes()}`
            // let milliseconds = newDate.getMilliseconds()
            // if (milliseconds.toString().length == 2) {
            //     milliseconds = `0${milliseconds}`
            // } else if (milliseconds.toString().length == 1) {
            //     milliseconds = `00${milliseconds}`
            // }
            milliDate = `${formatDate().split('-').join('')}${hours}${minutes}`
            return milliDate ? milliDate : ''
        }
    }
}
</script>

<style lang="less" scoped>
.searchDiv{
    background-color: #ffff;
    padding: 10px 0;
    .search{
        width: 360px;
        margin: 0 auto;
        height: 40px;
        line-height: 40px;
        padding-left: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        display: block;
        border: 1px solid #999;
    }
}
.position-horizontal-demo {
    height: 55px;
    line-height: 55px;
    padding-left: 20px;
    font-size: 16px;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;
    background-color: #fff;
    border-bottom: 1px solid #ebeef3;
}
    .trace {
        background-color: #EBEEF2;
        .c-item {
            height: 50px;
            line-height: 50px;
            padding: 0 20px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #f3f3f3;
            background-color: #fff;
            &.auto {
                height: auto;
            }
            .name {
                text-align: right;
                .inline-x-switch {
                    top: 9px
                }
                &.auto {
                    max-width: 200px;
                    // width: 45.333vw;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
                .weui-switch:checked {
                    border-color: #2269FC;
                    background-color: #2269FC
                }
                input {
                    text-align: right;
                    &::-webkit-input-placeholder { /* WebKit browsers */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 4 to 18 */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */
                        direction: rtl;
                        font-size: 16px;
                    }
                    &::-ms-input-placeholder { /* Internet Explorer 10+ */
                        direction: rtl;
                        font-size: 16px;
                    }
                }
            }
            .title {
                .red {
                    color: red;
                }
            }
        }
        .sift {
            margin-top: 15px;
            background-color: #fff;
            &.menu {
                padding-left: 17px;
                border-bottom: 1px solid #f3f3f3;
            }
            .header {
                color: #2269FC;
                font-size: 14px;
                height: 50px;
                line-height: 50px;
                padding-left: 20px;
                font-weight: bold;
                border-bottom: 1px solid #f3f3f3;
                position: relative;
                .add-trace {
                    display: inline-block;
                    width: 80px;
                    height: 30px;
                    line-height: 30px;
                    font-size: 12px;
                    text-align: center;
                    color: #2269FC;
                    border: 1px solid #2269FC;
                    border-radius: 15px;
                    position: absolute;
                    top: 10px;
                    right: 20px;
                }
            }
            .trace-detail {
                .header {
                    &.item {
                        border-bottom: none;
                        padding-left: 30px;
                    }
                }
            }
            .fujian {
                padding: 20px;
                .left {
                    font-weight: bold;
                }
                .right {
                    float: right;
                }
            }
            // .upload-wrap {
            //     padding: 0 20px 20px 20px;
            // }
            .btns {
            width: 100%;
            display: flex;
            justify-content: center;
            background-color: #fff;
            .save, .submit {
                width: 150px;
                height: 40px;
                line-height: 40px;
                border-radius: 20px;
                text-align: center;
                color: #fff;
                background-color: #2269FC;
            }
            .submit {

            }
        }
        }
    }
</style>

<style lang="less">
 .trace {
    .name {
        div:first-of-type {
            height: 100%;
        }
        .weui-cells {
            height: 100%;
            margin-top: 0 !important;
            &::before, &::after {
                border: none;
            }
            .weui-cell {
                padding-right: 0;
                .weui-cell__ft {
                    height: 29px;
                    .vux-number-selector {
                        &.vux-number-selector-plus {
                            margin-right: 0;
                        }
                        height: 100%;
                        background-color: #DAE6FE;
                        svg {
                            fill: #2269FC;
                        }
                    }
                    .vux-cell-value {
                        height: 100%;
                        display: inline-block;
                        padding-top: 5px;
                    }
                    .vux-number-input {
                        height: 100%;
                    }
                }
            }
        }
    }
 }
 
.vux-popup-dialog {
    height: 300px !important;
}
</style>